<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中多个组件的过渡</title>
  <script src="vue.js"></script>
  <script src="velocity.min.js"></script>
  <link rel="stylesheet" href="css/animate.css">
  <style>
      .fade-enter,.fade-leave-to{
        opacity: 0;
      }
      .fade-enter-active,.fade-leave-active{
        transition:opacity 1s;
      }
  </style>
</head>
<body>
<!--动态组件是通过component来定义的 -->
<!--属性:is让component与对应的组件进行绑定-->
<!--type:'child',  这里让child默认显示-->
<div id="app">
  <transition name="fade" mode="out-in">
    <component :is="type"></component>
    <!--<child v-if="show"></child>-->
    <!--<child-one v-else></child-one>-->
    <!--<div v-if="show" key="hello">hello world</div>-->
    <!--<div v-else key="Bye">Bye world</div>-->
  </transition>
  <button @click="handelBtnClick">change</button>
</div>
<script>
  Vue.component('child',{
    template:'<div>child</div>'
  })
  Vue.component('child-one',{
    template:'<div>child-one</div>'
  })
  var vm=new Vue({
    el:"#app",
    data:{
      type:'child',
    },
    methods:{
      handelBtnClick:function(){
        this.type=this.type==='child'?'child-one':'child'
      }
    }
  })
</script>
</body>
</html>
